如果從錶面最靠近觀看者的部分往下走，依序為 秒分時針/錶盤/機芯。接下來，我們來做錶盤。設計圖如下

從上方的圖，可以拆解成

• 數字從 1 到 12
• 數字的偏移角度是 n * (360 / 12)
• 一個短線
• 最外面的圓圈

先開一個檔案，命名為 BackwardsClockNumberView

一個數字只要用 VStack 加上 Text和 View 就完成了，code & preview 如下

// 單一個數字的 view

struct ClockNumberView: View {
  
  var hour: Int
  
  var body: some View {
    
    VStack {
      Text("\(hour)")
        .fontWeight(.black)
        .rotationEffect(.radians((Double.pi * 2 / 12 * Double(hour))))
      Spacer()
    }
    .padding()
    .rotationEffect(.radians(Double.pi * 2 / 12 * -Double(hour)))
  }
}

struct BackwardsClockNumberView_Previews: PreviewProvider {
  static var previews: some View {
    BackwardsClockNumberView()
      .previewLayout(.fixed(width: 200, height: 200))
  }
}

然後，把 1 ~ 12 用 ForEach 生出來，就完成啦，只要四行就做得到了。但為了能讓他們不會彼此擠壓到對方，所以用 ZStack 疊起來。

struct BackwardsClockNumberView: View {
  var body: some View {
    ZStack {
      ForEach(1..<13) { i in
        ClockNumberView(hour: i)
      }
    }
  }
}

struct BackwardsClockNumberView_Previews: PreviewProvider {
  static var previews: some View {
    ClockNumberView(hour: 1)
      .previewLayout(.fixed(width: 200, height: 200))
    BackwardsClockNumberView()
      .previewLayout(.fixed(width: 200, height: 200))
  }
}

再 preview 一下看看

數字完成之後，我們需要一個圓圈在所有數字之外，讓他看起來像「錶盤」。

這邊只要用 SwiftUI 的 Circle 就做得到了。

Dial 是錶盤的英文，先開一個 名字為 ClockDialView 的 View。以 ZStack 為基礎，最下方放上一個圓圈，然後把 1 ~ 12 的 BackwardsClockNumberView 疊上去，就完成了。

struct ClockDialView: View {
  var body: some View {
    
    ZStack {
      Circle()
        .stroke()
        .padding(3)
      BackwardsClockNumberView()
    }
  }
}

struct ClockDialView_Previews: PreviewProvider {
  static var previews: some View {
    ClockDialView()
      .previewLayout(.fixed(width: 200, height: 200))
  }
}

錶盤，完成

但是…如果我們把 preview 換成一般的 device，會發現圓圈和數字會有偏移，我們點擊一個數字，就會看到一行的長度頂到上面和下面，長度在旋轉的時候，會因為裝置寬度不夠，讓 2 3 4 8 9 10 都看不到。

把這個 view 加上寬高 200 就會得到一個錶盤。

struct ClockDialView_Previews: PreviewProvider {
  static var previews: some View {
    ClockDialView()
      .frame(width: 200, height: 200, alignment: .center)
  }
}